<template>
    <view class="cus-page tem">
        <!-- 拼团 -->
        <view v-if="cardData.status==42 || cardData.status==43" class="com-flex com-row-between">
            <view class="com-flex com-col-top">
                <view v-for="(item,index) in 5" :key="index" class="collage-item">
                    <image src="/static/logo.ico" alt=""></image>
                    <view v-if="index==0" class="text">团长</view>
                </view>
            </view>
            <text v-if="cardData.status==42" class="com-active-color">拼团中</text>
            <text v-if="cardData.status==43" class="com-active-color">待结算</text>
        </view>
        <!-- 其他 -->
        <view v-else class="com-flex com-row-between">
            <view class="com-flex">
                <u-checkbox-group v-if="cardData.checked" style="margin-right:8rpx"
                    v-model="cardData.checked" @change="temChange(ind,$event)">
                    <u-checkbox size="40rpx" shape="circle" iconSize="30rpx"></u-checkbox>
                </u-checkbox-group>
                <view class="com-flex">
                    <image class="com-m-r-20 business-logo" src="/static/logo.ico" alt=""></image>
                    <text>rakuma卖家:泡泡玛特</text>
                </view>
            </view>
            <text v-if="cardData.status==10" class="com-active-color">交易成功</text>
            <text v-if="cardData.status==1" class="com-price-color">待付款</text>
            <text v-if="cardData.status==2" class="com-active-color">已入库</text>
            <text v-if="cardData.status==41" class="com-active-color">直邮发货</text>
            <text v-if="cardData.status==5" class="com-active-color">运输中</text>
        </view>
        
        <!-- 列表 -->
        <view v-for="(item,index) in cardData.list" :key="index" @tap="goOrderDetail"
            class="com-m-t-40 list-item">
            <view class="com-flex">
                <u-checkbox-group v-if="false" style="margin-right:8rpx"
                    v-model="item.checked" @change="itemChange(ind,index,$event)">
                    <u-checkbox size="40rpx" shape="circle" iconSize="30rpx"></u-checkbox>
                </u-checkbox-group>
                <image src="/static/temporary/img1.jpg" alt=""></image>
                <view class="com-flex-col com-col-top right">
                    <text class="u-line-2 com-font-bold com-lh-40">{{item.title}}</text>
                    <view class="com-m-t-20">
                        <u-tag bgColor="#EAFAFF" borderColor="#EAFAFF" color="#02BDF3" size="mini" :text="item.tag"></u-tag>
                    </view>
                </view>
                <view class="com-m-l-30 com-flex-col com-col-bottom price-num">
                    <view class="com-m-t-4 com-flex com-minor-color">
                        <text class="com-main-color com-font-bold">{{item.price}}</text>
                        <text class="com-font-26">日元</text>
                    </view>
                    <text class="com-m-t-20 com-assist-color">x{{item.num}}</text>
                </view>
            </view>
            <view class="com-flex buttons">
                <u-button v-if="cardData.status==2" text="取消订单" shape="circle"
                    :customStyle="{width:'160rpx',height:'60rpx',margin:'0 0 0 24rpx',fontSize:'28rpx',color:'#212122',border:'1px solid #212122'}"
                    @click="handButton(1)">
                </u-button>
                <u-button v-if="cardData.status==2" text="继续付款" shape="circle"
                    :customStyle="{width:'160rpx',height:'60rpx',margin:'0 0 0 24rpx',fontSize:'28rpx',color:'#02BDF3',border:'1px solid #02BDF3'}"
                    @click="handButton(2)">
                </u-button>

                <u-button v-if="cardData.status==3" text="委托寄售" shape="circle"
                    :customStyle="{width:'160rpx',height:'60rpx',margin:'0 0 0 24rpx',fontSize:'28rpx',color:'#212122',border:'1px solid #212122'}"
                    @click="handButton(3)">
                </u-button>
                <u-button v-if="cardData.status==3" text="直邮/拼团" shape="circle"
                    :customStyle="{width:'160rpx',height:'60rpx',margin:'0 0 0 24rpx',fontSize:'28rpx',color:'#02BDF3',border:'1px solid #02BDF3'}"
                    @click="handButton(4)">
                </u-button>
            </view>
            
        </view>
    </view>
</template>


<script>
export default {
    name:'businessItem',
    components: {},
    props:{
        cardData: {
            type: Object,
            default:()=>{
                return {
                    checked: [], // 有该字段则开启复选操作
                    logo: '/static/logo.ico',
                    name: 'rakuma卖家:泡泡玛特',
                    status: 1, // 1交易成功,2待付款,3委托寄售,41直邮发货,42拼团,43待结算,5已发货
                    leagueMember: [], // 团员 42,43字段
                    list: [
                        { 
                            imgUrl: '/static/temporary/img1.jpg',
                            title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹测试测试',
                            tag: '新品',
                            price: 1660,
                            num: 1
                        }
                    ]
                }
            }
        }
    },

    data () {
        return {
        }
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {
        // 按钮事件
        handButton(type){
            // type: 1取消订单, 2继续付款, 3委托寄售, 4直邮/拼团
            this.$emit("clickButton",{type:type})
        },

        // 去订单详情
        goOrderDetail(){
            uni.navigateTo({ url:'/pages/shopping-cart/order-detail'})
        }
    },
}
</script>


<style scoped lang='scss'>
	.tem{
		padding: 40rpx 32rpx;
		background: #fff;
		border-radius: 24rpx;
        // 拼团
        .collage-item{
            margin-right: 10rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            &:nth-child(1){
                margin-right: 24rpx;
            }
            &:last-child{
                margin-right: 0;
            }
            image{
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
            }
            .text{
                width: 76rpx;
                height: 32rpx;
                background: linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%);
                border-radius: 16rpx;
                text-align: center;
                line-height: 32rpx;
                color: #fff;
                font-size: 22rpx;
                margin-top: -10rpx;
                position: relative;
                z-index: 10;
            }
        }
        // 其他
		.business-logo{
            width: 48rpx;
            height: 48rpx;
            border-radius: 8px;
		}

        // 列表
		.list-item{
			image{
				width: 180rpx;
				height: 180rpx;
				margin-right: 20rpx;
				border-radius: 24rpx;
			}
			.right{
				flex: 1;
			}
            .right,.price-num{
                height: 180rpx;
            }
            .buttons{
                justify-content: flex-end;
            }
		}
	}
</style>